<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead"></div>
    <Table :columns="columns1" border :height="tableHeight" :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="show(row)">
          <Icon size="18" type="ios-create-outline" />编辑
        </span>
        <span class="tableBtn" @click="remove(row.id)">
          <Icon size="18" type="ios-trash" />删除
        </span>
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import { exhibitors } from "../../api/exhibitors";
export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      columns1: [
        {
          title: "id",
          key: "id",
          align: "center",
          minWidth: 60
        },
        {
          title: "name",
          key: "name",
          align: "center",
          minWidth: 150
        },
        {
          title: "手机号",
          key: "mobile",
          align: "center",
          minWidth: 150
        },
        {
          title: "邮箱",
          key: "email",
          align: "center",
          minWidth: 150
        },
        {
          title: "省份",
          key: "state",
          align: "center",
          minWidth: 100
        },
        {
          title: "公司",
          key: "company",
          align: "center",
          minWidth: 150
        },
        {
          title: "地址",
          key: "address",
          align: "center",
          minWidth: 150
        },
        {
          title: "操作",
          slot: "action",
          minWidth: 200,
          align: "center"
        }
      ],
      list: [],
      tableHeight: 100
    };
  },
  created() {
    this.exhibitors();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    show(row) {
      this.$router.push({
        path: "/news/New-edit"
      });
    },
    exhibitors() {
      this.loading = true;
      const { page, pageSize } = this;
      exhibitors({ page: page - 1, pageSize }).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    changePage(e) {
      this.page = e;
      this.exhibitors();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.exhibitors();
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
